<template>
  <div class="c-table">
    <a-table
      bordered
      :scroll="scroll"
      :pagination="false"
      :loading="loading"
      :columns="columns"
      :expandIcon="expandIcon"
      :expandRowByClick="true"
      :indentSize="15"
      :row-selection="
        rowSelection ? rowSelectionFun : null
      "
      :data-source="datas"
      :ref="refs"
      size="middle"
      :rowKey="rowKey"
    >
      <template :slot="expandedRowRender" slot-scope="item">
        <slot :name="expandedRowRender" :tableRow="item"></slot>
      </template>
      <template
        v-for="colCustom in columnsCustom"
        :slot="colCustom.customRender"
        slot-scope="item"
      >
        <slot :name="colCustom.customRender" :tableRow="item"></slot>
      </template>
    </a-table>

    <!-- 分页 -->
    <c-pagination
      v-if="showPagination"
      :datas="paginationDatas"
      @onShowNumChange="onShowNumChange"
      @onShowSizeChange="onShowSizeChange"
    ></c-pagination>
  </div>
</template>

<script>
export default {
  props: {
    datas: {
      type: Array,
      default: () => {
        return [];
      }
    },
    paginationDatas: {
      type: Object,
      default: () => {
        return {};
      }
    },
    showPagination: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    optionRow: {
      type: Array,
      default: () => {
        return [];
      }
    },
    rowKey: {
      type: String,
      default: "id"
    },
    expandedRowRender: {
      type: String,
      default: ""
    },
    refs: {
      type: String,
      default: ""
    },
    columns: {
      type: Array,
      default: () => {
        return [];
      }
    },
    rowSelection: {
      type: Boolean,
      default: false
    },
    scroll: {
      type: Object,
      default: ()=>{
        return {};
      }
    },
    checkboxProps: {
      type: Object,
      default: ()=>{
        return {};
      }
    }
  },
  data() {
    return {};
  },
  computed: {
    rowSelectionFun() {
      return {
        onChange: this.onSelectChange,
        getCheckboxProps: this.getCheckboxProps
      };
    },
    columnsCustom() {
      return this.columns
        .filter(item => {
          return item.scopedSlots;
        })
        .map(item => item.scopedSlots);
    } 
  },
  created() {
  },
  mounted() {},
  methods: {
    // 表格选择框的默认属性配置
    getCheckboxProps(record){
      let property = this.checkboxProps.property
      let condition = this.checkboxProps.condition
      let value = this.checkboxProps.value
      let resVal = eval(Number(record[property])+condition+Number(value))
      return{
        props: {
          disabled: resVal?resVal:false
        }
      }
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.$emit("onSelectChange", selectedRowKeys, selectedRows);
    },
    onShowSizeChange(val) {
      this.$emit("onPageSizeChange", val);
    },
    onShowNumChange(val) {
      this.$emit("onShowNumChange", val);
    },
    //自定义图标处理
    expandIcon(props) {
      if (props.record.children && props.record.children.length > 0) {
        if (props.expanded) {
          return (
            <span
              class="customIcon"
              onClick={e=>{this.aa(e, props)}}
            >
              <a-icon type="down" />
            </span>
          );
        } else {
          return (
            <span
              class="customIcon"
              onClick={e=>{this.aa(e, props)}}
            >
              <a-icon type="right" />
            </span>
          );
        }
      } else {
        return <span class="customIcon"> </span>;
      }
    },
    aa(e, props){
      props.onExpand(props.record, e);
    }
    // expandedRowsChange(e,c,b){
    //   console.log(555)
    //   console.log(e,c,b)
    // }
  }
};
</script>
<style lang="less" scoped>
::v-deep .ant-input-search {
  width: 300px;
}
.customIcon {
  cursor: pointer;
  color: #939393;
  font-size: 10px;
  padding: 1px;
}
.table-search-input {
  width: 300px;
}
::v-deep.ant-table-body { overflow-x: auto !important;}
</style>
